<template>
    <div class="app">
        <div class="Main" >
          <div class="swiper">
            <swiper :options="swiperOption">
        <!-- 幻灯内容 -->
              <swiper-slide v-for="(item,index) in img" :key="index">
                <img :src="item">
              </swiper-slide>
        <!-- 以下控件元素均为可选 -->
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
         </div>
            <div class="information">
                <p class="title">{{title}}</p>
                <p class="price">￥<span>{{price}}</span></p>
                <p class="postage">
                    <span>快递：<span>{{freight}}</span>元</span>
                    <span>月销量<span>{{sales}}</span>件</span>
                </p>
            </div>
            <div class="evaluate">
              <div class="SEvaluate" v-if="shopEvaluate">
                <h1>商品评价({{evaluateTotal}})</h1>
                <div class="shopEvaluate" v-for="(item,index) in evaluate" :key="index">
                  
                  <p class="shopEvaluaTetitle">
                    <img :src="item.head" alt="">
                    <span>{{item.nickname}}</span>
                  </p>
                  <p class="shopEvaluaPl">{{item.content}}</p>
                  <p class="shopEvaluaTime">{{item.times}}</p>
                </div>
                <div class="more">
                  <p>查看更多评论</p> 
                </div>
              </div>
              
              <div class="noShopEvaluate" v-if="noShopEvaluate">没有相关评论</div>
            </div>
        </div>
        <div class="footer">
            <div class="collect">收藏</div>
            <div class="ShopCar" @click="addShopcar()">加入购物车</div>
        </div>

          <div class="check" v-if="check">
          <div class="close">
            <div class="del" @click="del()"></div>
            <div class="vertical"></div>
            <div class="circle"></div>
          </div>

          <div class="goodsTitle">
            <div class="img">
              <img :src="img[0]" alt="">
            </div>
            <div class="shopTitle">
              <p class="name">{{title}}</p> 
              <p class="prise">
                <span class="shopPrice">￥{{price}}</span>
                <span class="code">商品编码:143208071</span>
              </p>
            </div>
          </div>
          <div class="size">
            <div class="shopColor shopSize"  v-for="(data,index) in shopTitle" :key="index">
              <h1>{{data.title}}</h1>
              <span v-for="(item,index) in data['values']" :key="index" @click="changeColor(data.attrid,item.vid)" :class="{'as':item.checked}" class="show">{{item.value}}</span>
            </div>
            <div class="quantity">
              <h1>购买数量</h1>
              <div class="num">
                <span @click="dec()">-</span>
                <span class="number">
                  <input type="text" v-model="number">
                </span>
                <span @click="add()">+</span>
              </div>
            </div>
          </div>
         <router-link :to="{path:'/ShopCar',query: {gid: this.gid}}"><div class="sure">确定</div></router-link> 
        </div>
        
    </div>
</template>


<script>
import Swiper from "swiper";
import axios from "axios";
export default {
  data() {
    return {
      gid:this.$route.query.id,
      number:1,
      check: false,
      img: [],
      title: null,
      price: null,
      freight: null,
      sales: null,
      shopTitle: null,
      evaluate:null,
      evaluateTotal:null,
      shopEvaluate:true,
      noShopEvaluate:false,
      //轮播
      swiperOption: {
        autoplay: true,
        pagination: {
          el: ".swiper-pagination" //分页器,
        }
      }
    };
  },
  mounted() {},
  methods: {
    addShopcar() {
      this.check = true;
    },
    del() {
      this.check = false; 
    },
     //点击变色
    changeColor(attrId,paramId){
      for(let i=0;i<this.shopTitle.length;i++){
        if(this.shopTitle[i].attrid==attrId){
          for(let j=0;j<this.shopTitle[i].values.length;j++){
            if(this.shopTitle[i].values[j].vid==paramId){
              // console.log(this.shopTitle[i].values[j].vid)
              this.shopTitle[i].values[j].checked=true;
            }else{
              this.shopTitle[i].values[j].checked=false;
            }
            console.log(this.shopTitle[i].values[j].checked)
          }
        }
      }
    },
    //点击-
   dec(){
      if(this.number>0){
        this.number--
      }
    },
    add(){
      this.number++
    }
  },
  created() {
    //商品数据渲染
    axios.post("http://vueshop.glbuys.com/api/home/goods/info?gid="+this.gid+"&type=details&token=1ec949a15fb709370f").then(res => {
        this.img = res.data.data.images;
        this.title = res.data.data.title;
        this.price = res.data.data.price;
        this.freight = res.data.data.freight;
        this.sales = res.data.data.sales;
      });
     
    //点击购物车渲染数据
    axios.post("http://vueshop.glbuys.com/api/home/goods/info?gid="+this.gid+"&type=spec&token=1ec949a15fb709370f").then(res => {
        this.shopTitle = res.data.data;
      });

    //商品评论渲染
    axios.post("http://vueshop.glbuys.com/api/home/reviews/index?gid="+this.gid+"&token=1ec949a15fb709370f&page=1").then(res => {
      if(res.data.code==200){
        this.shopEvaluate=true
        this.noShopEvaluate=false
        this.evaluate = res.data.data;
        this.evaluateTotal=res.data.pageinfo.total;
      }else{
        this.shopEvaluate=false
        this.noShopEvaluate=true
      }
      
    });
  }
};
</script>

<style scoped>
.shopColor .as{
  font-size: 0.26rem;
  display: inline-block;
  width: 1rem;
  height: 0.74rem;
  background: #fcb40a;
  margin-right: 0.2rem;
  margin-top: 0.2rem;
  text-align: center;
  line-height: 0.74rem;
  border-radius: 0.07rem;
  color: white;
}
.opcity{
  z-index: 10;
  opacity: 1;
}
.style{
  position: absolute;
  width: 100%;
    height: 100%;
    /* background-color: rgba(0,0,0,.3); */
    background: violet;
    left: 0;
    top: 0;
}
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0.06rem;
}
.Main {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
  background: #efefef;
  position: relative;
}

.swiper {
  width: 100%;
  height: 7.57rem;
  background: white;
}
.swiper img {
  width: 100%;
  height: 100%;
}

.information {
  width: 100%;
  height: 2.5rem;
  background: white;
  font-size: 0.26rem;
}
.title {
  width: 90%;
  height: 0.78rem;
  margin: 0 auto;
  padding-top: 0.2rem;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
}
.price {
  width: 90%;
  margin: 0 auto;
  color: #f93036;
  font-size: 0.26rem;
  margin-top: 0.35rem;
}
.postage {
  font-size: 0.22rem;
  width: 90%;
  margin: 0 auto;
  margin-top: 0.3rem;
  display: flex;

  justify-content: space-between;
  color: #969696;
}

.evaluate {
  width: 100%;
  /* height: 1.07rem; */
  background: white;
  margin-top: 0.85rem;
  font-size: 0.26rem;
}
.evaluate h1 {
  width: 100%;
  height: 0.6rem;
  padding-top: 0.3rem;
  padding-left: 0.2rem;
  font-size: 0.32rem;
  color: #838589;
}
SEvaluate{
  width: 100%;
  height: 100%;
  background: white;
}
.shopEvaluate{
  width: 100%;
  height: 2rem;
  margin-top: 0.15rem;
}
.shopEvaluaTetitle{
  position: relative;
}
.shopEvaluaTetitle img{
  width: 0.6rem;
  height: 0.6rem;
  border-radius:50%; 
  padding-left: 0.2rem;
}
.shopEvaluaTetitle span{
  position: absolute;
  bottom: 0.1rem;
  left: 1rem;
  font-size: 0.26rem;
}
.shopEvaluaPl{
  padding-left: 0.2rem;
  margin-top: 0.3rem;
  font-size: 0.3rem;
}
.noShopEvaluate{
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.3rem;
}
.shopEvaluaTime{
  padding-left: 0.2rem;
  margin-top: 0.15rem;
  color: #6f7376;
}
.more{
  width: 100%;
  height: 1rem;
  background: white;
}
.more p{
  width: 2.45rem;
  height: 0.5rem;
  border: 1px solid #d4181b;
  /* margin-top: 0.45rem; */
  text-align: center;
  line-height: 0.5rem;
  margin: 0.45rem auto;
  font-size: 0.26rem;
  border-radius: 0.03rem; 
  background: white;
}

.footer {
  width: 100%;
  height: 1.19rem;
  font-size: 0.38rem;
  color: white;
  line-height: 1.19rem;
  text-align: center;
}
.collect {
  width: 50%;
  height: 100%;
  background: #fcb40a;
  float: left;
}
.ShopCar {
  width: 50%;
  height: 100%;
  background: #cc0004;
  float: left;
}

.check {
  width: 100%;
  height: 8rem;
  background: #efefef;
  position: absolute;
  z-index: 100;
  bottom: 0;
}

.close {
  width: 0.4rem;
  height: 0.96rem;
  position: absolute;
  right: 0.3rem;
  top: -0.7rem;
  z-index: 12;
}
.del {
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 auto;
  background: url("../assets/img/del.png") no-repeat;
  background-size: 100%;
}
.vertical {
  width: 0.02rem;
  height: 0.6rem;
  background: white;
  position: absolute;
  left: 0.18rem;
  top: 0.35rem;
}
.circle {
  width: 0.1rem;
  height: 0.1rem;
  background: black;
  position: absolute;
  left: 0.14rem;
  top: 1rem;
  border-radius: 100%;
}
.goodsTitle {
  width: 100%;
  height: 1.25rem;
  border-bottom: 1px solid #eeeeee;
  background: white;
}
.img {
  width: 0.83rem;
  height: 0.83rem;
  float: left;
}
.img img {
  width: 100%;
  height: 100%;
  margin-top: 0.2rem;
  margin-left: 0.2rem;
}
.shopTitle {
  width: 6rem;
  line-height: 0.3rem;
  font-size: 0.24rem;
  float: left;
  margin-left: 0.3rem;
  margin-top: 0.16rem;
}
.name {
  width: 6rem;
}
.prise {
  margin-top: 0.1rem;
}
.shopPrice {
  color: #ec888e;
}
.code {
  color: #8e8e8e;
  float: right;
}
.size {
  width: 100%;
  height: 4.6rem;
  background: white;
  position: relative;
}
.shopColor {
  width: 100%;
  height: 1.5rem;
  padding-top: 0.2rem;
  padding-left: 0.24rem;
}
.shopColor h1 {
  font-size: 0.28rem;
}
.show {
  font-size: 0.26rem;
  display: inline-block;
  width: 1rem;
  height: 0.74rem;
  background: #efefef;
  margin-right: 0.2rem;
  margin-top: 0.2rem;
  text-align: center;
  line-height: 0.74rem;
  border-radius: 0.07rem;
}
/* .shopSize {
  width: 100%;
  height: 1.5rem;
  padding-top: 0.2rem;
  padding-left: 0.24rem;
}
.shopSize h1 {
  font-size: 0.28rem;
}
.shopSize span {
  font-size: 0.26rem;
  display: inline-block;
  width: 0.73rem;
  height: 0.73rem;
  background: #efefef;
  margin-right: 0.2rem;
  margin-top: 0.2rem;
  text-align: center;
  line-height: 0.74rem;
  border-radius: 0.07rem;
} */
.quantity {
  width: 100%;
  padding-top: 0.2rem;
  padding-left: 0.24rem;
}
.quantity h1 {
  font-size: 0.28rem;
  margin-top: 0.15rem;
}
.num {
  width: 2.1rem;
  height: 0.64rem;
  border: 1px solid black;
  position: absolute;
  right: 0.2rem;
  bottom: 0.3rem;
  border-radius: 0.07rem;
}
.num span {
  display: inline-block;
  width: 30%;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.26rem;
  margin-top: 0.1rem;
  border-right: 1px solid black;
}
.num span:last-child {
  border: none;
}
.number input{
  width: 0.4rem;
  /* background: violet; */
  border: none;
  text-align: center;
}
.sure {
  width: 100%;
  height: 0.82rem;
  background: #ce0105;
  position: absolute;
  bottom: 0;
  text-align: center;
  line-height: 0.82rem;
  font-size: 0.38rem;
  color: white;
}
</style> 
